<template>
  <div class="commission">
    <div class="title">
      {{detailsData.bonusName}}
    </div>

    <div class="total flex">
      <div class="info">
        <div><span>发放月份：{{detailsData.bonusMonth}}</span><span
            style="margin-left:20px;">在销激励类型：{{ detailsData.headerTypeStr}}</span></div>
        <div>共{{detailsData.peopleCount}}人，在销激励总额：{{detailsData.headerMoney}}元</div>
      </div>
      <div class="btns flex">
        <Button type="primary" @click='onImport'>数据导入</Button>
        <Button type="primary" @click='onAdd'>新增</Button>
        <Button @click='onClear'>清空列表</Button>

        <Button type="primary" @click='onSubmit'>提交</Button>
      </div>
    </div>
    <div class="qie">
      <Tabs :value="tabVal" type="card" @on-click="tabValChange">
        <TabPane label="房源明细" name="1">
        </TabPane>
        <TabPane label="人员汇总" name="2">
        </TabPane>
      </Tabs>

      <dt-grid ref="table" :columns="columns" :list="list" />

    </div>
    <import-modal ref='import' @success='onSuccess'></import-modal>
    <create-person ref='createPerson' @success='createPersonSuccess'></create-person>
    <incentive-sbumit ref='incentiveSbumit' :detailsData="detailsData"
      @success='sbumitSuccess'></incentive-sbumit>

  </div>
</template>

<script>
  import columnOpt from './opt/incentiveLaunchColumn'
  import importModal from './components/importModal.vue'
  import createPerson from './components/createPreson.vue'
  import incentiveSbumit from './components/incentiveSubmit.vue'
  import incentiveMgr from '@/biz/bonus/incentive'
  export default {
    components: {
      importModal,
      createPerson,
      incentiveSbumit,
    },
    data() {
      return {
        detailsData: {},

        columns: [],
        list: [],
        tabVal: '1',
      }
    },
    mounted() {
      this.getDetails()
      this.columns = columnOpt.options1(this)
      this.$refs.table.init(this)
    },
    methods: {
      updatebonusMoney(val, info) {
        let params = {
          bonusMoney: val,
          headerId: this.$route.query.headerId,
          id: info.id,
        }
        incentiveMgr.updateBonusStimulateDetail(params).then((res) => {
          this.getDetails()
        })
      },
      getDetails() {
        let params = {
          headerId: this.$route.query.headerId,
        }
        incentiveMgr.selectBonusStimulateInfo(params).then((res) => {
          this.detailsData = res
          this.detailsData.boStimulateDetailInfoList.forEach((item) => {
            item.bonusMoney = Number(item.bonusMoney)
          })
          if (this.tabVal == 1) {
            this.columns = columnOpt.options1(this)
            this.list = this.detailsData.boStimulateDetailInfoList
          } else {
            this.columns = columnOpt.options2(this)
            this.list = this.detailsData.userStimulateDetailInfos
          }
        })
      },
      tabValChange(val) {
        if (val == 1) {
          this.columns = columnOpt.options1(this)
          this.list = this.detailsData.boStimulateDetailInfoList
        } else {
          this.columns = columnOpt.options2(this)
          this.list = this.detailsData.userStimulateDetailInfos
        }
      },

      onFilter(data) {
        this.filterInfo = { ...data }
        this.getList()
      },
      onImport() {
        this.$refs.import.show()
      },
      onAdd() {
        this.$refs.createPerson.create()
      },
      onClear() {
        this.$Modal.confirm({
          title: '删除',
          content: '<p>确认清空？</p>',
          onOk: () => {
            let params = {
              headerId: this.$route.query.headerId,
            }
            incentiveMgr.emptyBonusStimulateDetail(params).then((res) => {
              this.getDetails()
            })
          },
          onCancel: () => {
            this.$Message.info('你取消了清空。')
          },
        })
      },
      onSubmit() {
        if (this.detailsData.boStimulateDetailInfoList && this.detailsData
          .boStimulateDetailInfoList.length) {
          let subFlag = this.detailsData.boStimulateDetailInfoList.some(item => {
            return item.bonusMoney == null
          })
          console.log(subFlag, this.detailsData.boStimulateDetailInfoList, '111111111111');
          if (subFlag) {
            this.$Message.error('应付奖金不能为空。')
          } else {
            this.$refs.incentiveSbumit.create()
          }

        } else {
          this.$Message.warning('请添加数据后进行提交。')
        }
      },

      detailsDelete(val) {
        this.$Modal.confirm({
          title: '删除',
          content: '<p>确认删除该选项？</p>',
          onOk: () => {
            let params = {
              id: val.id,
            }
            incentiveMgr.delBonusStimulateDetail(params).then((res) => {
              this.getDetails()
            })
          },
          onCancel: () => {
            this.$Message.info('你取消了删除。')
          },
        })
      },
      onSuccess() {},
      createPersonSuccess() {
        this.getDetails()
      },
      sbumitSuccess() {
        this.$router.go(-1)
        this.$store.commit('deleteroutefun', '在销激励奖金发起')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .commission {
    padding: 20px;

    .title {
      margin-bottom: 20px;
      font-size: 20px;
    }

    .info {
      line-height: 2;
    }

    .total {
      justify-content: space-between;

      Button {
        margin-left: 10px;
      }
    }
  }

  .qie {
    margin-top: 20px;
  }
</style>